<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" th:href="@{/css/fonts/element-icons.woff}">
    <style>
        .el-table .warning-row {
            background: #ff4d51;
        }

    </style>
</head>

<body>
<div id="app">
    <template>
        <div>
            <label th:value="筛选职位">
            <el-select v-model="queryCandidate.post" placeholder="筛选职位" @change="list">
                <el-option v-for="pd in recruitmentInformation" :key="pd.postId"
                           :label="pd.postName"
                           :value="pd.postId"></el-option>
            </el-select>
            </label>
            <el-select v-model="queryCandidate.degree" placeholder="筛选学历" @change="list">
                <el-option v-for="pd in allPostDegree" :key="pd.degreeId" :label="pd.degreeName"
                           :value="pd.degreeId"></el-option>
                </el-option>
            </el-select>
            <el-button style="margin-left: 72%" size="mini" type="danger" @click="addSaveDialogFormVisible = true">
                添加
            </el-button>
        </div>
        <el-dialog title="添加" :visible.sync="addSaveDialogFormVisible" width="25%">
            <el-form :model="postSave">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="postSave.candidateUserinfo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="应聘职位编号" :label-width="formLabelWidth">
                    <el-select v-model="postSave.positionNo" placeholder="请选择">
                        <el-option v-for="pd in recruitmentInformation" :key="pd.postId"
                                   :label="pd.postName"
                                   :value="pd.postId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="postSave.state" placeholder="请选择">
                        <el-option v-for="pd in status" :key="pd.statusId" :label="pd.statusName" :value="pd.statusId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addSaveDialogFormVisible =  false">取 消</el-button>
                <el-button type="primary" @click="candidateSave">确 定</el-button>
            </div>
        </el-dialog>
        <el-table :data="applyForInformation" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column label="姓名" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.candidateUserinfo.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="应聘职位编号" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.candidateId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.candidateUserinfo.userPhone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="工作年限" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.candidateUserinfo.userWorkingYear }}</span>
                </template>
            </el-table-column>

            <el-table-column label="毕业院校" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.candidateUserinfo.userCollege }}</span>
                </template>
            </el-table-column>

            <el-table-column label="投递日期" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.candidateDate }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.candidateStatus }}</span>
                </template>
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-select v-model="changeCandidate.statusId" placeholder="请选择">
                        <el-option v-for="pd in status" :key="pd.statusId" :label="pd.statusName" :value="pd.statusId">
                        </el-option>
                    </el-select>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-table>
        </el-table>
    </template>
</div>
</body>
<script>
    const myAxios = axios.create({
        baseURL: 'http://localhost:8080',
        timeout: 5000,
    });
    let vm = new Vue({
        el: '#app',
        data: {
            formLabelWidth: '50',
            addSaveDialogFormVisible: false,
            allPostDegree: [],
            allUser: [],
            user: [],
            postSave: {
                candidateUserinfo: 2,
                candidatePost: 1,
                candidateStatus: 1
            },
            changeCandidate: {
                candidateId: 0,
                statusId: 0,
            },
            queryCandidate: {
                post: 0,
                degree: 0
            },
            applyForInformation: [],
            recruitmentInformation: [],
            status: [],
        },
        methods: {
            candidateSave() {
                myAxios.post("/candidate/save", this.postSave).then(e => {
                    this.addSaveDialogFormVisible = false;
                    this.list();
                });
            },
            initialize() {
                this.list();
                myAxios("/degree/list").then(e => {
                    this.allPostDegree = e.data.data;
                });
                myAxios("/post/list?page=1&limit=20000").then(e => {
                    this.recruitmentInformation = e.data.data;
                })
                myAxios("/status/list").then(e => {
                    this.status = e.data.data;
                })
            },
            unique(arr) {
                return arr.filter(function (item, index, arr) {
                    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
                    return arr.indexOf(item, 0) === index;
                });
            },
            list() {
                myAxios('candidate/list?page=1&limit=20000&post=' + this.queryCandidate.post + '&degree=' + this.queryCandidate.degree).then(e => {
                    let data = e.data.data;
                    const res = new Map();
                    let index = 0;
                    data.forEach((arr) => {
                        if (!res.has(arr.candidateUserinfo.userName)) {
                            res.set(arr.candidateUserinfo.userName, 1)
                        } else {
                            this.user[index] = arr.candidateUserinfo.userName;
                            index++;
                        }
                    })
                    this.user = this.unique(this.user);
                    this.applyForInformation = e.data.data;
                })
            },
            handleEdit(index, row) {
                this.changeCandidate.candidateId = row.candidateId;
                myAxios.post("/candidate/change", this.changeCandidate).then(e => {
                    this.list();
                });
            },
            tableRowClassName({row, rowIndex}) {
                let isRepeat = false
                this.user.forEach(name => {
                    if (name === row.candidateUserinfo.userName) {
                        isRepeat = true;
                    }
                })
                if (isRepeat) {
                    return "warning-row"
                }

            }
        },
        mounted() {

        },
        created() {
            this.initialize();
            this.list();
        }
    })
</script>

</html>